<template>
    <div style="overflow: hidden">
        <div style="display: flex">
            <div style="margin-left: 200px"><img src="https://a.dushu.com/img/logo.png"/></div>
            <!--搜索-->
            <div style="margin-left: 200px;margin-top: 40px" align="center">
                <el-form action="https://www.baidu.com/s" method="get">
                <el-input placeholder="搜索海量图书"  name="wd" v-model="input"  style="width: 250px"/>
                    <el-input type="submit" style="margin: 2px ;width: 50px;color: deepskyblue"  value="搜索"></el-input></el-form>
            </div>
        </div>
        <!--类别-->
        <div style="text-align: center;margin: 0 200px;font-weight: bold">
            <el-menu :default-active="activeIndex" mode="horizontal">
                <el-menu-item index="1" @click="$route.push('/store')">首页</el-menu-item>
                <el-menu-item index="2">
                    <a style="text-decoration:none;" href="https://yuedu.baidu.com/book/list/0?fr=indextop"> 分类</a>
                </el-menu-item>

                <el-menu-item index="3">
                    <a style="text-decoration:none;" href="https://yuedu.baidu.com/rank/hotsale">榜单</a></el-menu-item>
                <el-menu-item index="4">
                    <a style="text-decoration:none;" href="https://www.dushu.com/meiwen/">每日一读</a></el-menu-item>
                <el-menu-item index="5"><a style="text-decoration:none;" href="https://www.dushu.com/guoxue/">国学/古籍</a>
                </el-menu-item>
                <el-menu-item index="6"><a style="text-decoration:none;" href="https://yuedu.163.com/rank">排行榜</a>
                </el-menu-item>
                <el-menu-item index="/dashboard" @click="$router.push('/dashboard')">前往主页</el-menu-item>
            </el-menu>
        </div>
        <div style="display: flex;justify-content: flex-start">
            <!--侧边框-->
            <div style="border: 1px solid #cccc;width: 250px;height: 300px;margin:10px 200px">
                <div style="padding-left: 18px;padding-top:10px;font-weight: bold">国风中文网</div>
                <a style="text-decoration:none;" href="https://guofeng.yuedu.163.com/yc/category/7">
                    <span style="font-size: small;padding-left: 18px;color: deepskyblue">都市生活</span>
                </a>

                <el-divider direction="vertical"></el-divider>
                <a href="https://guofeng.yuedu.163.com/yc/category/4" style="text-decoration:none;">
                    <span style="font-size: small;">官场职场</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://guofeng.yuedu.163.com/yc/category/1" style="text-decoration:none;">
                    <span style="font-size: small;"> 玄幻仙侠</span></a>
                <br/>
                <a href="https://guofeng.yuedu.163.com/yc/category/5" style="text-decoration:none;">
                    <span style="font-size: small;padding-left: 18px;color: red">悬疑探险</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://guofeng.yuedu.163.com/yc/category/6" style="text-decoration:none;">
                    <span style="font-size: small;">灵异恐怖</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://guofeng.yuedu.163.com/yc/category/12" style="text-decoration:none;">
                    <span style="font-size: small;">  短篇小说</span></a>
                <br/>
                <br/>
                <hr/>

                <div style="padding-left: 18px;padding-top:10px;font-weight: bold">采薇书院</div>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/22" style="text-decoration:none;">
                    <span style="font-size: small;padding-left: 18px;color: deepskyblue">浪漫青春</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/24" style="text-decoration:none;">
                    <span style="font-size: small;">古风古韵</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/8" style="text-decoration:none;">
                    <span style="font-size: small;">  都市言情</span></a>
                <br/>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/9" style="text-decoration:none;">
                    <span style="font-size: small;padding-left: 18px;">穿越架空</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/18" style="text-decoration:none;">
                    <span style="font-size: small;"> 宫斗宅斗</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://caiwei.yuedu.163.com/ycmm/category/17" style="text-decoration:none;">
                    <span style="font-size: small; color: red">  种田重生</span></a>
                <br/>
                <br/>
                <hr/>

                <div style="padding-left: 18px;padding-top:10px;font-weight: bold">图书</div>
                <a href="https://yuedu.163.com/book/category/category/2000" style="text-decoration:none;">
                    <span style="font-size: small;padding-left: 18px;color: deepskyblue">小说作品</span></a>
                <el-divider direction="vertical"></el-divider>

                <a href="https://yuedu.163.com/book/category/category/2300" style="text-decoration:none;">
                    <span style="font-size: small;">人文社科</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://yuedu.163.com/book/category/category/2600" style="text-decoration:none;">
                    <span style="font-size: small;"> 成功励志</span></a>
                <br/>
                <a href="https://yuedu.163.com/book/category/category/2400" style="text-decoration:none;">
                    <span style="font-size: small;padding-left: 18px;">经济管理</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://yuedu.163.com/book/category/category/2800" style="text-decoration:none;">
                    <span style="font-size: small;color: red"> 品质生活</span></a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://yuedu.163.com/book/category/category/3000" style="text-decoration:none;">
                    <span style="font-size: small;">   计算机</span></a>
                <br/>
                <br/>

            </div>

            <!--轮播图-->
            <div style="width: 56%;margin-left: -180px;margin-top: 10px">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in imgs" :key="item">
                        <img style="height: 300px;width: 100%" :src="item"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <br/>
        <div style="font-size: large;margin-left: 205px">主编推荐</div>
        <br/>

        <!--图书列表-->
        <div style="border: 1px solid #cccc;width: 1120px;height: 670px;margin-left: 200px">
            <br/>

            <div style="display: flex;flex-direction: row">

                <div>
                    <el-row style="width: 550px;height: 100px;margin-left: 2px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/nloyZTYrU5xXLMsSKFd5yw==/8796093024890297093"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>灰猎犬号</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥48.60
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col :span="8" style="margin-left: 45px">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/rTMBOSdQ7mU21yHy0tnRkQ==/8796093024727680450"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>都市潜龙</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥41.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </div>
                <div>
                    <el-row style="margin-left: -90px;width: 550px;height: 100px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/ExCHKl7x193NWhshgbEazQ==/8796093024810678678"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>书中自有颜如玉</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥42.30
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col :span="8" style="margin-left: 50px">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="https://easyreadfs.nosdn.127.net/ZQiErZsmMioFAVZ-kJy4Ow==/8796093024941816666"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>哈代作品集</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥21.80
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </div>
                <div>
                    <el-row style="margin-left: -80px;width: 550px;height: 100px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/aMxrwar82k5xrP_6lmU5YQ==/8796093024470011499"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>民国奇人</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥36.00
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>


                    </el-row>
                </div>
            </div>
            <br/>
            <div style="display: flex;flex-direction: row">
                <div>
                    <el-row style="width: 550px;height: 100px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/hjZj_LtasXH60UXJHpAv1A==/8796093024732884634"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>战兵城</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥19.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col :span="8" style="margin-left: 45px">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/2s8ej4bV-K3nyMAOH75Wiw==/8796093022545840289"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>丹师剑宗</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥66.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </div>
                <div>
                    <el-row style="margin-left: -90px;width: 550px;height: 100px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="https://easyreadfs.nosdn.127.net/PEcCF0gxxiH67tMu2rDn0Q==/8796093023331643104"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>漂洋过海来爱你</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥56.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                        <el-col :span="8" style="margin-left: 50px">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="https://easyreadfs.nosdn.127.net/JVt9X979lS-9vqqMeg1Ayg==/8796093024885588375"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>乡土中国</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥41.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </div>
                <div>
                    <el-row style="margin-left: -80px;width: 550px;height: 100px">
                        <el-col :span="8">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="	https://easyreadfs.nosdn.127.net/jlaFruJYDNu_yABak4oCOA==/8796093024569905637"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span>万古剑帝</span>
                                    <div>
                                        <el-button type="text" class="button" style="color: red;font-weight: bold">
                                            ￥39.90
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>


                    </el-row>
                </div>
            </div>
        </div>
        <!--底部-->
        <hr/>
        <div style="border: 0px #ccc;height: 15vh;">
        <div style="text-align: center;margin-top: 20px">
        <span style="color: #aaa">关于读书</span>
        <span style="color: #aaa;margin-left: 20px">读书目录</span>
        <span style="color: #aaa;margin-left: 20px">联系我们</span></div>
        <div style="color: #aaa;text-align: center;margin-left: 20px;margin-top: 8px">Copyright ©读书网</div>
        <div style="color: #aaa;text-align: center;margin-left: 20px;margin-top: 8px">邮箱：2776895893@qq.com</div>
    </div></div>
</template>

<script>
  import "../assets/index.css";
    export default {

        name: "Store",
        data() {
            return {
                input:"",
                activeIndex: '1',

                imgs: [
                    'http://img63.ddimg.cn/cuxiao/lxiangguo675x240.jpg',
                    'http://img61.ddimg.cn/cuxiao/675-240beisahng.jpg',
                    'https://easyreadfs.nosdn.127.net/fe_cms/file.cf0f84dd74afe23743f843d0799aa181.jpg',
                    'https://easyreadfs.nosdn.127.net/fe_cms/file.312d3fdbe1073431d827030cce52f9b4.jpg',
                    'https://edu-yuedu.bdimg.com/v1/RD/5years/720-285-%E5%A6%82%E6%9E%9C-1554368471664.jpg',


                ]
            }
        }
    }
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 10px;
    }

    .button {
        padding: 0;
        float: left;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
